<template>
  <div>
    <Card dis-hover class="bgd-content">
      <div slot="title">
          <div class="filtr-inline">
              <Button type="info" @click="onClickAdd">添加</Button>
          </div>
          <div class="filtr-inline">
            <span>商品分类：</span>
                <Select v-model="form.type_id" clearable style="width:100px">
                    <Option :value="item.id" v-for="item in category" :key="item.id">{{item.name}}</Option>
                </Select>
          </div>
          <div class="filtr-inline">
            <span>商品名称：</span><i-input v-model="form.name" placeholder="请输入..." style="width: 140px"></i-input>
          </div>
          <div class="filtr-inline">
              <Button type="primary" @click="getList">搜索</Button>
          </div>
      </div>
      <div>
        <Table :loading="loading" :columns="columns" :data="data"></Table>
      </div>
    </Card>
    <div class="page-block">
      <Page :total="total" :current="form.page" @on-change="onChangePage"></Page>
    </div>
    <Drawer title="操作" width='420' v-model="show">
        
        <Form ref="formBase" :model="formBase" :rules="ruleValidate" :label-width="80">
            <FormItem label="名称" prop="name">
                <Input v-model="formBase.name" style="width: 260px"></Input>
            </FormItem>
            <FormItem label="规格" prop="specification">
              <Input v-model="formBase.specification" style="width: 100px"></Input>
            </FormItem>
            <FormItem label="分类" prop="type_id">
                <Select v-model="formBase.type_id" style="width:100px">
                    <Option :value="item.id" v-for="item in category" :key="item.id">{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="单位" prop="unit_id">
                <Select v-model="formBase.unit_id" style="width:100px">
                    <Option :value="item.id" v-for="item in unit" :key="item.id">{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="参考进价" prop="purchase">
              <Input v-model="formBase.purchase" style="width: 140px"></Input>
            </FormItem>
            <FormItem label="参考售价" prop="price">
                <Input v-model="formBase.price" style="width: 140px"></Input>
            </FormItem>
        </Form>

        <div class="drawer-footer">
            <Button type="primary" :loading="buttonLoad" @click="handleSubmit('formBase')">确定</Button>
        </div>
    </Drawer>
  </div>
</template>
<script>
import { _getList, _saveData, _delData } from '@/api/product.js'
import { _getAllUnit } from '@/api/unit.js'
import { _getAllCategory } from '@/api/category.js'
export default {
  name: 'supplier',
  data () {
    return {
      buttonLoad: false,
      loading: true,
      total: 0,
      show: false,
      form: {
        name: '',
        type_id: '',
        page: 1
      },
      // 提交保存数据
      formBase: {
        id: '',
        name: '',
        specification: '',
        type_id: '',
        unit_id: '',
        purchase: '',
        price: ''
      },
      category: [],
      unit: [],
      ruleValidate: {
        name: [
          { required: true, message: '商品名称不能为空'},
        ],
        specification: [
          { required: true, message: '规格不能为空'},
        ],
        unit_id: [
          { required: true, message: '单位不能为空'},
        ],
        type_id: [
          { required: true, message: '分类不能为空'},
        ],
        purchase: [
          { required: true, message: '参考进价不能为空'},
        ],
        price: [
          { required: true, message: '参考售价不能为空'},
        ],
      },
      columns: [
        {
            title: '商品名称',
            key: 'name',
            tooltip: true,
            width: 110
        },
        {
            title: '规格',
            key: 'specification',
            tooltip: true
        },
        {
            title: '分类',
            key: 'type'
        },
        {
            title: '单位',
            key: 'unit'
        },
        {
            title: '参考进价',
            key: 'purchase',
            tooltip: true
        },
        {
            title: '参考售价',
            key: 'price',
            tooltip: true
        },
        {
            title: '操作',
            key: 'action',
            width: 130,
            render: (h, params) => {
                return h('div', [
                    h('Button', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: () => {
                              this.$refs['formBase'].resetFields()
                              this.formBase = JSON.parse(JSON.stringify(params.row))
                              this.show = true
                            }
                        }
                    }, '查看'),
                    h('Button', {
                         props: {type: 'error', size: 'small'},
                    }, [
                        h('Poptip', {
                            props: {
                                confirm: true,
                                transfer: true,
                                placement: 'left-end',
                                title: '确定要删除吗！',
                                type: 'error',
                                size: 'small',
                            },
                            on: {
                                'on-ok': () => {
                                  _delData({id: params.row.id}).then( res => {
                                      const obj = res.data
                                      if (obj.status == 1){
                                          this.$Message.success(obj.msg);
                                          this.getList()
                                      }else {
                                          this.$Message.error(obj.msg);
                                      }
                                  })
                                },
                            }
                        }, '删除')
                    ])
                ]);
            }
        },
      ],
      data: []
    }
  },
  methods: {
    onChangePage (page) {
      this.form.page = page
      this.getList()
    },
    // 增加按钮
    onClickAdd () {
      this.$refs['formBase'].resetFields()
      this.formBase.id = ''
      this.show = true
    },
    // 保存数据
    handleSubmit (form) {
      this.$refs[form].validate( (valid) => {
        if (valid) {

          const obj = {}
          Object.assign(obj, this.formBase)

          this.buttonLoad = true
          _saveData(obj).then( res => {
            const obj = res.data
            if (obj.status == 1){
              this.$Message.success(obj.msg)
            }else {
              this.$Message.error(obj.msg)
            }
            this.buttonLoad = false
            this.show = false
            this.getList()
          })
        }else {
          this.$Message.error('请填写必填项')
        }
      })
    },
    // 获取数据
    getList () {
      this.loading = true
      _getList(this.form).then( res => {
        const obj = res.data.data
        this.total = obj.total
        this.data = obj.data
        this.loading = false
      })
    }
  },
  mounted() {
    this.getList()
    _getAllCategory(this.form).then( res => {
        this.category = res.data.data
    })
    _getAllUnit(this.form).then( res => {
        this.unit = res.data.data
    })
  },
}
</script>
